<template>
  <div v-if="filminfo">
    <img :src="filminfo.poster" class="poster"/>
    <h2>{{filminfo.name}}</h2>

    <h3>演职人员</h3>
    <myswiper perview="4" class="actorswiper" myclassname="actorswiper">
      <div class="swiper-slide" v-for="data in filminfo.actors" :key="data.name">
        <img :src="data.avatarAddress"/>
        <p>{{data.name}}</p>
      </div>
    </myswiper>
    <h3>剧照</h3>
    <myswiper perview="3" class="photoswiper" myclassname="photoswiper">
      <div class="swiper-slide" v-for="(data,index) in filminfo.photos" :key="index">
        <img :src="data"/>
      </div>
    </myswiper>
  </div>
</template>
<script>
import axios from 'axios'
import myswiper from '../views/Detail/DetailSwiper'
// import bus from '@/bus'
import { HIDE_TABBAR_MUTATION, SHOW_TABBAR_MUTATION } from '@/type'
export default {
  props: ['id'],
  data () {
    return {
      filminfo: null
    }
  },
  beforeMount () {
    // bus.$emit('maizuo', false)
    // this.$store.state.tabbarStatus = false
    this.$store.commit(HIDE_TABBAR_MUTATION, false)// 第一个参数为mutataion中的方法名
  },
  mounted () {
    // console.log('要id获取详情信息', this.$route.params.id, this.id)
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.id}&k=4359832`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.filminfo = res.data.data.film
    })
  },
  beforeDestroy () {
    // bus.$emit('maizuo', true)
    // this.$store.state.tabbarStatus = true
    this.$store.commit(SHOW_TABBAR_MUTATION, true)
  },
  components: {
    myswiper
  }
}
</script>
